<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
    <style>
        .layui-form-selectup dl {
            top: 42px;
            bottom: unset;
        }
    </style>
</head>
<body>


<!--表单-->
<form class="layui-form" action="" id="queryform">

    <div class="layui-inline">
        <label class="layui-form-label">关键字</label>
        <div class="layui-inline">
            <input type="text" name="keyword" placeholder="请输入名称或电话" autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-inline">
        <label class="layui-form-label">跟进类型</label>
        <div class="layui-inline">
            <select name="type" lay-filter="type">
                <option value="全部" selected>全部</option>
                <option value="潜在开发">潜在开发</option>
                <option value="正式跟进">正式跟进</option>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <button class="layui-btn" lay-submit lay-filter="query">查询</button>
    </div>
</form>

<!--form2 编辑form-->
<form class="layui-form" id="cuform" style="display: none">

<!--    用于取值ModelAndView的status的值-->
<!--    <input type="text" name="status" th:value="${status}" hidden>-->

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="cu.name" lay-verify="required|name" placeholder="请输入员工名称" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class=""></div>


        <div class="layui-inline">
            <label class="layui-form-label">跟进内容</label>
            <div class="layui-input-inline">
                <input type="text" name="traceDetails" placeholder="请输入内容" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-inline">
            <label class="layui-form-label">跟进结果</label>
            <div class="layui-input-inline">
                <input type="text" name="traceResult" placeholder="请输入跟进结果" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-inline" >
            <label class="layui-form-label">跟进方式</label>
            <div class="layui-inline layui-form" lay-filter="traceType">
                <select name="traceType" lay-filter="traceType">
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">跟进人员</label>
            <div class="layui-input-inline">
                <input type="text" name="inputUser" placeholder="请输入跟进人" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline" >
            <label class="layui-form-label">跟进类型</label>
            <div class="layui-inline" >
                <select name="type" lay-filter="type">
<!--                    <option value="全部" selected>全部</option>-->
                    <option value="潜在客户">潜在开发</option>
                    <option value="正式客户">正式跟进</option>
                </select>
            </div>
        </div>



<!--        <div class="layui-inline">-->
<!--            <label class="layui-form-label">状态</label>-->
<!--            <div class="layui-inline">-->
<!--                <select name="status" lay-filter="status" >-->
<!--                    <option value="流失客户" >流失客户</option>-->
<!--                    <option value="开发客户" >开发客户</option>-->
<!--                    <option value="潜在客户" >潜在客户</option>-->
<!--                    <option value="正式客户" >正式客户</option>-->
<!--                    <option value="资源池客户" >资源池客户</option>-->
<!--                </select>-->
<!--            </div>-->
<!--        </div>-->

    </div>
</form>

<!--table-->
<table class="layui-hide" id="cutable" lay-filter="cutable"></table>


<!--右侧工具-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--头部工具栏-->
<!--<script type="text/html" id="toolbarDemo">-->
<!--        <div class="layui-btn-container">-->
<!--            <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>-->
<!--        </div>-->
<!--</script>-->

<!--跟进历史在客户列表新增-->


<script type="text/javascript">

    layui.use(['table','form','jquery','layer'],function () {

        var table=layui.table;
        var form=layui.form;
        var $=layui.jquery;
        var layer=layui.layer;


        // var status=$("#cuform").find('input[name="status"]').val();
        //
        // // 设置状态下拉框默认选中值
        // if(status!=null&&status!=""){
        //     $("#queryform option[value="+status+"]").prop("selected","selected");
        //     //刷新select
        //     form.render('select');
        // }

        table.render({
            elem: '#cutable'
            , url: '/tracehistory/list'
            // , toolbar:'#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar:[]
            , title: '跟进历史表'
            , cols: [
                [
                // {type:'checkbox'},
                {type: 'numbers', title: '编号',align: 'center'}
                ,{field: 'cu', title: '姓名', edit: 'text',align: 'center',templet:function (d) {
                        var res='';
                        if (d.cu!=null){
                            res=d.cu.name;
                        }
                        return res;
                    }}
                ,{field: 'traceTime', title: '跟进日期', edit: 'text',align: 'center'}
                ,{field: 'traceDetails', title: '跟进内容', edit: 'text',align: 'center'}
                ,{field: 'traceType',title: '跟进方式',align: 'center',templet:function (d) {
                    var res='';
                    if (d.traceType!=null){
                        res=d.traceType.title;
                    }
                    return res;
                }}
                ,{field: 'traceResult', title: '跟进结果', edit: 'text',align: 'center'}
                ,{field: 'inputUser', title: '录入人', edit: 'text',align: 'center'}
                ,{field: 'type', title: '跟进类型', edit: 'text',align: 'center'}
                ,{field: 'right' ,title: '操作', toolbar:'#barDemo',align: 'center'}


            ]
            ]
            ,request:{
                pageName: 'currentPage',
                limitName: 'PageSize'
            }
            ,parseData:function (res) {
                return{
                    "code":0,
                    "msg":res.msg,
                    "count":res.data.totalConut,
                    "data":res.data.data
                }
            }
            ,page:true

        });

        // // 部门下拉方法
        // function deptSelectRender(formid){
        //     $.ajax({
        //         url:'/ssm/department/list',
        //         type: 'get',
        //         dataType:'json',
        //         success:function (res) {
        //             var data=res.data;
        //             $.each(data,function (index,el) {
        //                 var node='<option value="'+el.id+'">'+el.name+'</option>';
        //                 $("#"+formid).find('select').append(node);
        //             });
        //             form.render('select')
        //         }
        //     })
        // };


        function SelectjtraceType(formid,dmname){
            $.ajax({
                url:'/tracehistory/getDdetail',
                type:'get',
                dataType:'json',
                data:{

                    "dmname":dmname,

                },
                success:function (res) {
                    var data=res.data;
                    console.log(data);
                    $.each(data,function (index,traceType) {
                        console.log(traceType.title);
                        var node='<option value="'+traceType.id+'">'+traceType.title+'</option>';
                        $("#"+formid).find('select[name="traceType"]').append(node);
                    });
                    form.render('select','traceType');
                }
            })
        }


        // 查询提交
        form.on('submit(query)',function (data) {
            // console.log(data.field);
            table.reload('cutable',{
                where:data.field,
                page:{
                    curr:1,
                }
            })
            return false;
        })

        table.on('tool(cutable)',function (obj) {
            var layevent=obj.event;
            var data=obj.data;
            var tr=obj.tr;



            if(layevent=="del"){
                $.ajax({
                    url:'/tracehistory/delete',
                    type:'post',
                    dataType:'json',
                    data:{
                        "id":id,
                    },

                    success:function (res) {
                        layer.msg(res.msg);
                        $(tr).remove();
                    }
                })
            }

            if(layevent=="edit"){
                layer.open({
                    title:"编辑跟进历史信息",
                    type:1,
                    content:$("#cuform"),
                    area:['500px','500px'],
                    btn:['保存','重置'],
                    btn1:function () {

                        $.ajax({//update
                            url:'/tracehistory/upOrin',
                            type:'post',
                            dataType:'json',
                            data:{
                                "id":id,
                                "customerid":data.customerid,
                                "traceDetails":$("#cuform").find('input[name="traceDetails"]').val(),
                                "traceResult":$("#cuform").find('select[name="traceType"]').val(),
                                "traceType":$("#cuform").find('input[name="traceResult"]').val(),
                                "type":$("#cuform").find('select[name="type"]').val(),
                                "inputUser":$("#cuform").find('input[name="inputUser"]').val()
                            },
                            success:function (res) {
                                layer.closeAll('page');
                                layer.msg(res.msg);
                                $("#cuform").find('input').val('');
                                $("#cuform").find('select[name="traceType"]').empty();
                                table.reload('cutable',{});
                            }
                        })
                    },
                    btn2:function(){
                        $("#cuform").find('input[name="cu.name"]').val(data.cu.name);
                        $("#cuform").find('input[name="traceDetails"]').val(data.traceDetails);
                        $("#cuform").find('input[name="traceResult"]').val(data.traceResult);
                        $("#cuform").find('input[name="inputUser"]').val(data.inputUser);
                        $("#cuform").find('select[name="traceType"]').reset();
                        $("#cuform").find('select[name="type"]').reset();
                    },
                    success:function () {
                        SelectjtraceType('cuform','跟进方式');
                        $("#cuform").find('input[name="cu.name"]').val(data.cu.name);
                        $("#cuform").find('input[name="traceDetails"]').val(data.traceDetails);
                        $("#cuform").find('input[name="traceResult"]').val(data.traceResult);
                        $("#cuform").find('input[name="inputUser"]').val(data.inputUser);

                    },
                    cancel:function () {
                        $("#cuform").find('input').val('');
                        $("#cuform").find('select[name="traceType"]').empty();

                    }

                })
            }
        })

        table.on('toolbar(cutable)',function (obj) {
            var layevent=obj.event;
            //var checkStatus=table.checkStatus('emtable');

            if(layevent=="add"){
                layer.open({
                    title:'新增跟进信息',
                    traditional:true,
                    contentType: "application/json",
                    type:1,
                    content:$("#cuform"),
                    area:['500px','500px'],
                    btn: ['保存','重置'],
                    btn1:function () {

                        var customerid=data.customerid;
                        var traceDetails=$("#cuform").find('input[name="traceDetails"]').val();
                        var traceResult=$("#cuform").find('input[name="traceResult"]').val();
                        var traceType=$("#cuform").find('select[name="traceType"]').val();
                        var type=$("#cuform").find('select[name="type"]').val();
                        var inputUser=$("#cuform").find('input[name="inputUser"]').val();

                        $.ajax({
                            url:'/customer/upOrin',
                            type:'post',
                            dataType:'json',
                            data:{
                                "customerid":customerid,
                                "traceDetails":traceDetails,
                                "traceResult":traceResult,
                                "traceType":traceType,
                                "type":type,
                                "inputUser":inputUser,
                            },
                            success:function (res) {
                                if(res.success){
                                    layer.closeAll('page');
                                    layer.msg(res.msg);
                                    $("#cuform").find("input").val('');
                                    $("#cuform").find('select[name="traceType"]').empty();
                                    table.reload('cutable',{});

                                }

                            }
                        })
                    },
                    btn2:function () {
                        $("#cuform").find("input").val('');
                        $("#cuform").find("select").reset();
                    },
                    success:function () {
                        SelectjtraceType('cuform','跟进方式');
                    },
                    cancel:function () {
                        $("#cuform").find("input").val('');
                        $("#cuform").find('select[name="traceType"]').empty();


                    }
                })
            }

        })
    })
</script>

</body>
</html>